<template>
	<el-col :span="props.span" :xs="props.xs" :md="props.md">
		<el-form-item :label-width="100">
			<div class="btn-group">
				<el-button type="primary" round icon="Search" style="min-width: 60px;" @click="onSearchClick">搜索</el-button>
				<el-button style="min-width: 60px;" round icon="Refresh" @click="onResetClick">重置</el-button>
				<!-- 展开/收起按钮 -->
				<el-button v-if="props.showExpand" link class="expand-btn" @click="onExpandClick"
				           style="color: #409eff;">
					{{ props.expand ? '收起' : '展开' }}
					<el-icon :style="{ marginLeft: '4px' }">
						<component :is="props.expand ? ArrowUp : ArrowDown"/>
					</el-icon>
				</el-button>
			</div>
		</el-form-item>
	</el-col>
</template>

<script setup lang="ts">
import {ArrowUp, ArrowDown} from '@element-plus/icons-vue';

const props = defineProps({
	span: {type: Number, default: 6},
	xs: {type: Number, default: 24},
	md: {type: Number, default: 6},
	expand: {type: Boolean, default: false},      // 父组件控制展开状态
	showExpand: {type: Boolean, default: true}    // 是否显示展开按钮
});

const emit = defineEmits(['search', 'reset', 'expand']);

const onSearchClick = () => emit('search');
const onResetClick = () => emit('reset');
const onExpandClick = () => emit('expand');
</script>

<style scoped>
.btn-group {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}
</style>
